@filter-row-value-width: 470px;
@filter-row-width: 900px;
.filter-editor {
  margin-top: 10px;
  padding-left: 16px;
  padding-right: 16px;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.filter-editor-filter-pane {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.filter-editor-scroll-pane {
  display: flex;
  height: 200px;
  width: @filter-row-width;
  flex: 0 0 auto;
  border: 1px solid #cacaca;
  justify-content: flex-start;
  flex-direction: column;
  overflow: auto;
}

.filter-editor-select-row {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex: 0 0 auto;
}

.filter-editor-row {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  padding: 5px;
  flex: 0 0 auto;
  padding-left: 10px;
  height: fit-content;
}

.filter-editor-row-predicate {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  height: fit-content;
}

.filter-editor-value {
  width: @filter-row-value-width;
}

/*
.filter-editor-row-predicate > * {
  margin-right: 8px;
}
*/

.filter-row-col-select,
.filter-row-op-select {
  margin-right: 8px;
  flex: 0 0 auto;
}

.filter-row-col-select,
.filter-row-col-select select {
  width: 200px;
}

.filter-row-op-select,
.filter-row-op-select select {
  width: 170px;
}

.filter-editor-edit-section {
  flex: 1 0 auto;
  overflow: auto;
}
